import React, { useState, memo, useEffect, useMemo, useRef } from 'react';
import { Slider, Input, Dropdown } from 'antd';
import {
    DndContext,
    useDraggable
} from '@dnd-kit/core';
import DraggableItem from '@/components/Draggable';


function Picture({ content, setconfig, percent, imgurl, imgzoom, imgrotate, edit, imgstyle, id, style, checkedId }) {


    function refreshconfig(active, fn) {
        setconfig((config) => {
            let newconfig = JSON.parse(JSON.stringify(config));
            if (active.id) {
                //新建id 并 配置基础位置信息
                newconfig.pages = newconfig?.pages?.map?.(item => {
                    if (item.active) {
                        item.components = item?.components?.map?.(it => {
                            if (it?.id == active.id) {
                                return fn?.(it);
                            }
                            return it
                        })
                    }
                    return item
                });
                return newconfig
            }
            return newconfig
        });
    }

    let handleDragEnd = ({ active, delta }) => {
        refreshconfig(active, (it) => {
            let prevx = it?.imgstyle?.left ?? 0,
                prevy = it?.imgstyle?.top ?? 0;
            it.imgstyle.left = prevx + delta.x / percent;
            it.imgstyle.top = prevy + delta.y / percent;
            return it
        })
    }


    return (
        (edit && id == checkedId) ?
            <div
                style={{ margin: 0, width: "100%", height: "100%" }}
                data-no-dnd="true"
            >
                <DndContext onDragEnd={handleDragEnd}>
                    <div style={{ width: "100%", height: "100%" }}>
                        <DraggableItem
                            drag={true}
                            style={{
                                zIndex: imgstyle.zIndex,
                                left: imgstyle.left,
                                top: imgstyle.top,
                                width: "100%",
                                height: "100%",
                            }}
                            key={id}
                            id={id}
                            percent={1}
                        >
                            <img
                                src={imgurl ? imgurl : require("@/assets/defaultpic.png")}
                                style={{
                                    width: imgstyle.width,
                                    height: imgstyle.height,
                                    transform: `scale(${imgzoom}) rotate(${imgrotate}deg)`,
                                    transformOrigin: "center",
                                    transition: "all 0.2s"
                                }}
                                alt=""
                            />
                        </DraggableItem>
                    </div>
                </DndContext>

            </div> :
            <div style={{ margin: 0, width: "100%", height: "100%", overflow: "hidden", position: "relative", borderRadius: style.borderRadius }}>
                <img
                    src={imgurl ? imgurl : require("@/assets/defaultpic.png")}
                    alt=""
                    style={{
                        width: imgstyle.width,
                        height: imgstyle.height,
                        transform: `scale(${imgzoom}) rotate(${imgrotate}deg)`,
                        transformOrigin: "center",
                        position: "absolute",
                        left: imgstyle.left,
                        top: imgstyle.top,
                        transition: "all 0.4s"
                    }}
                />
            </div>
    );
}

export default memo(Picture);